<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <a href=""></a>
    <h1>1</h1>
    <h1>2</h1>
    <h1 class="qwe">
        <ul>
            <span>
                <a href="">123</a>
                <a href="">835</a>
            </span>
        </ul>
    </h1>
    <h1>4</h1>
    <h1 id="myID">5</h1>
    <h1>6</h1>
    <script>
        // 什么是DOM 
        // 文档对象模型   document  object model
        // 提供操作文档的接口，可以改变页面的内容，结构，样式等等
        // dom 树
        // dom 节点
        // 一般分为12中 
        // 5中 
        // 文档节点 :  document
        // 元素节点 ： 就是标签  *****
        // 属性节点 ： 元素节点上面的属性 **
        // 文本节点 ： 包括在标签里面的文本 **
        // 注释节点 ： 就是注释的内容

        // var h1 = document.querySelector("h1")
        // console.log(h1)
        // console.log(h1.nodeName)
        // console.log(h1.nodeType)
        // console.log(h1.nodeValue)

        // 节点关系 
        // 获取节点 

        // document.getElementById()
        // document.getElementsByTagName()
        // document.getElementsByClassName()
        // document.getElementsByName()

        // 通过CSS选择器获取元素

        // var h1 = document.querySelector(".qwe a:nth-child(2)")
        // console.log(h1)
        // var h1s = document.querySelectorAll("h1")
        // console.log(h1s)

        // 创建标签
        // var div = document.createElement("div")
        // div.innerHTML = "我是div标签"
        // div.className = "myClass"
        // div.id = "myID"
        // console.log(div)

        // 加入元素 
        // 父元素.appendChild(元素)  加入到父元素的末尾  
        // document.body.appendChild(div)


    </script>
</body>

</html>